<template>
  <div :id="chartId" :style="{height:`${height}px`,width:`${width}px`}"></div>
</template>
<script>
/* eslint-disable */
/**
 * 分布图 - 统计图
 */
import echarts from "echarts";
export default {
  doc: {
    name: '分布图',
    desc: '用于 摄像机、灭火器 分布图'
  },
  beforeDestroy() {
    if (!this.chart) return false
    this.chart.dispose()
    this.chart = null
  },
  props: {
    width: {
      type: Number,
      default: 1380
    },
    height: {
      type: Number,
      default: 400
    },
    data: {
      type: Array,
      default: () => ([
        {name: '123',count: 10, abnormalCount: 0},
        {name: '333',count: 10, abnormalCount: 1},
      ]),
      select: [{name: '123',count: 10, abnormalCount: 0}]
    }
  },
  data() {
    return {
      chartId: undefined,
      chart: null
    };
  },
  watch: {    
    data: function(newVal) {  
      this.$nextTick(() => {
        this.initChart()
      })
    }
  },
  async mounted() {
    if(!this.chartId) this.chartId = this.getRandomId()
    // 防止 Data 为空就已经初始化 导致统计图为空
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    getRandomId  ()  {
  return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5)
},
    initChart() {
      this.chart = echarts.init(document.getElementById(this.chartId));
      var xAxisData = [];
      var data1 = [];
      var data2 = [];

      this.data.forEach(item => {
        xAxisData.push(item.name)
        data1.push(item.count ? item.count : 0)
        data2.push(item.abnormalCount ? item.abnormalCount : 0)
      })

      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(0,0,0,0.3)",
        },
      };
      this.chart.setOption({
        legend: {
          data: ["正常", "异常"],
          left: "10%",
        },
        brush: {},
        toolbox: {
          feature: {
            magicType: {},
          },
        },
        tooltip: {},
        xAxis: [
          {
            data: xAxisData,
            splitLine: { show: false },
            splitArea: { show: false },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff",
                width: "1",
              },
            },
          },
        ],

        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1,
            },
          },
          splitLine: { show: false }, //柱状图线条取消
        },
        grid: {
          bottom: 100,
        },
        series: [
          {
            name: "正常",
            type: "bar",
            stack: "one",
            color: ["#00FFAE"],
            emphasis: emphasisStyle,
            data: data1,
            barWidth: 10, //柱状图宽度
          },
          {
            name: "异常",
            type: "bar",
            stack: "one",
            color: ["#FDEE00"],
            emphasis: emphasisStyle,
            data: data2,
          },
        ],
      });
      // id.on("brushSelected", renderBrushed);
      // function renderBrushed(params) {
      //   var brushed = [];
      //   var brushComponent = params.batch[0];

      //   for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
      //     var rawIndices = brushComponent.selected[sIdx].dataIndex;
      //     brushed.push("[Series " + sIdx + "] " + rawIndices.join(", "));
      //   }

      //   id.setOption({
      //     title: {
      //       backgroundColor: "#333",
      //       text: "SELECTED DATA INDICES: \n" + brushed.join("\n"),
      //       bottom: 0,
      //       right: "10%",
      //       width: 100,
      //       textStyle: {
      //         fontSize: 10,
      //         color: "#ffffff",
      //       },
      //     },
      //   });
      // }
    }
  }
};
</script>